<template>
  <div ref="chartContainer" :id="chartId" style="width: 100%; height: 100%;"></div>
</template>

<script>
import { onMounted, ref, watchEffect, defineComponent } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  props: {
    chartId: {
      type: String,
      default: 'line-chart',
    },
    data: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const chartContainer = ref(null);
    // 使用 watchEffect 监听 data 的变化
    watchEffect(() => {
      // 确保 data 存在后再初始化图表
      if (props.data) {
        initChart();
      }
    });
    onMounted(() => {
      // 确保 data 存在且不为空再初始化图表
      if (props.data && props.data.length > 0) {
        initChart();
      } else {
        console.warn('数据未准备好，无法初始化图表');
        // 这里可以添加数据加载的逻辑，如监听数据变化等
      }
    });

    const initChart = () => {
      const chartInstance = echarts.init(chartContainer.value, null, {
        renderer: 'svg',
      });

      const options = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            interval: 0,
          },
          data: this.data.map((item) => item.date),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            // 现在应该是安全访问 data
            data: props.data,
          },
        ],
      };

      chartInstance.setOption(options);
    };

    return {
      chartContainer,
    };
  },
});
</script>